<template>
    <vxe-table align="center" :style="{'width': width}" ref="xTable" border show-header-overflow height="300">
        <vxe-table-column show-overflow v-for="(item, i) in tableKeys" :key="i" :field="item" :title="item" width="100"></vxe-table-column>
    </vxe-table>
</template>
<script>
export default {
    name: 'TableChart',
    props: {
        width: {
            type: String
        },
        data: {
            type: Object
        }
    },
    data () {
        return {
            tableKeys: []
        }
    },
    mounted () {
        const { columns, rows } = this.data
        this.tableKeys = columns
        this.$refs.xTable.loadData(rows)
    }
}
</script>
